<template>
    <div>
        <el-table :data="hosts.message.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border style="width: 100%">
            <el-table-column prop="title" label="标题内容" align="center"></el-table-column>
            <el-table-column prop="url" label="URL地址" align="center"></el-table-column>
            <el-table-column prop="domain" label="根域名" align="center"></el-table-column>
            <el-table-column prop="source" label="搜索来源" align="center"></el-table-column>
            <el-table-column prop="comment" label="备注" align="center">
                <template slot-scope="scope">
                    <textarea v-model="scope.row.comment"  @blur="editCommit(scope.row)">
                    </textarea>
                </template>
                </el-table-column>


            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" @click="deleteCommit(scope.row)">删除当前行记录</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--注释-->
        <!--分页-->
        <el-pagination v-if="hosts.message.length"
                       background layout=" prev, pager, next, jumper,sizes,total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 20, 40]"
                       :page-size="pagesize"
                       :total="hosts.message.length">
        </el-pagination>


    </div>
</template>


<style>

    el-table-column label {
        color: deepskyblue;
    }
    el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        color: blue;
    }
</style>


<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                currentPage:1, //初始页
                pagesize:5,    //    每页的数据
                hosts: {
                    "message":[]
                },
                dialog_exec_detail_view:false,
                comment:'',
                btnDelLoading:{},
            }
        },

        methods: {
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            },
            /*
            viewCommit(row) {
                var domain = row.domain;
                var source = row.source;
                this.$http.get('/api/vpsjson/viewCommit/', {params: {domain: domain, source: source}}).then(res => {
                    this.dialog_exec_detail_view = true;
                    console.log(typeof(res));
                    console.log(res.data.comment);
                    if (res.data.comment == null) {
                        this.exec_output.push("备注为空");
                    } else {
                        this.exec_output.push(res.data.comment);
                    }
                })
            },
            */
             get_list() {
                var vm = this;
                var url = '/api/vpsjson';
                axios({
                    method: 'get',
                    url: url,
                    headers: {'Content-Type':'application/json'},
                    reponseType: '',
                }).then(function (res) {
                        vm.hosts.message = res.data.data;
                        console.log(vm.hosts.message.length);
                })
             },

            editCommit(row) {
                var domain = row.domain;
                var source = row.source;
                var comment = row.comment;
                this.$http.post('/api/vpsjson/editCommit/', {domain: domain, source: source,comment:comment}).then(res => {
                    console.log(res);
                }, res => this.$layer_message("成功保存该备注"))
            },

            deleteCommit(row) {
                var domain = row.domain;
                var source = row.source;
                this.$confirm('此操作将永久删除该主机，是否继续？', '删除确认', {type: 'warning'}).then(() => {
                    this.$http.delete('/api/vpsjson/deleteCommit/', {
                        params: {
                            domain: domain,
                            source: source
                        }
                    }).then(res => {
                        this.$layer_message("删除成功");
                        this.get_list();
                        //this.fetch(this.currentPage);
                    })
                })
            },
        },

        created: function () {
            var vm = this;
            var url = '/api/vpsjson';
            axios({
                method: 'get',
                url: url,
                headers: {'Content-Type':'application/json'},
                reponseType: '',
            }).then(function (res) {
                    vm.hosts.message = res.data.data;
            })
        },
    }



</script>


